<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="viewport" 	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>临窗旋墨文件</title>
		<link rel="icon" href="/assets/img/lcxm.ico" type="image/ico">
		<link rel="stylesheet" type="text/css" 	href="/assets/bootstrap3.3.7/css/bootstrap.min.css" />
		<script type="text/javascript" src="/assets/js/jquery.js"></script>
		<script type="text/javascript" src="/assets/js/jquery.form.js"></script>
		<script type="text/javascript" src="/assets/bootstrap3.3.7/js/bootstrap.min.js"></script>
		<script type="text/javascript">
		    var ctx  = "[[@{/}]]";
		    $(function(){
		    	 
		    	 $(".submit").on("click", function(){
		    		 var options =  {
		    	            type: 'post',
		    	            dataType:'json',
		    	            success: function(data) {
		    	            	after(data.code == 0,data.msg);
		    	            },
		    	            error: function(jqXHR, textStatus, errorMsg) { // 出错时默认的处理函数
		    	            	after(false,"操作失败")
		    	            }
		    	        }
		    		 var $form = $("form");
		    		 $form.ajaxSubmit(options);
		    	 });
		    	 list();
		    	
		    }); 
		    var template = `
		    	<div class="alert alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                <div class="msg">操作成功</div>
            </div>
		    `;
		    function after(success, msg){
		    	var $msg = $(template).addClass(success? "alert-success" : "alert-danger");
		    	if(!success) {
		    		$(".msg", $msg).text(msg);
		    	}else {
		    		list();
		    	}
		    	$("form").before($msg);
		    	
		    }
		    
		    var li = `
		    	<li class="list-group-item">
                 <span><a href="" download="diwnload"></a></span>
                 <span style="margin-left:10px;">大小<span class="len"></span>KB</span>
                </li>
		    `;
		    function list(){
		    	var url=ctx + "mineFile/list"
		    	$.ajax(url, {
		    		dataType:'json',
		    		success: function(data){
		    			if(data.code != 0) return ;
		    			var list = data.data;
		    			if(!list) return;
		    			var $ul = $("ul");
		    			$ul.html("");
		    			list.forEach(function(item){
		    				var $li = $(li);
		    				$("a", $li).attr("href", item.url).text(item.name);
		    				$(".len", $li).text(item.size);
		    				$ul.append($li);
		    			});
		    			
		    		}
		    	});
		    }
		   
		</script>
	
	</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-12 col-md-12 col-xs-12">
			
			        <div class="panel panel-default">
					    <div class="panel-heading">
					        <h3 class="panel-title">
                                上传文件
                            </h3>
					    </div>
					    
					    <div class="panel-body">
					       
					        <form role="form" class="form-horizontal" action="/mineFile/upload" enctype="multipart/form-data" method="post">
                        
                            <div class="form-group">
                                <div class="col-sm-10 col-xs-10">
                                     <input type="file" name="file" />
                                </div>
                              </div>
                              
                            <div class="form-group">
                                <div class="col-sm-10 col-xs-10">
                                  <button type="button" class="btn btn-default submit">提交</button>
                                </div>
                              </div>
                        </form>
					    </div>
					</div>
					
					<div class="panel panel-default">
					    <div class="panel-heading">
					        <h3 class="panel-title">
					            下载列表
					        </h3>
					    </div>
					    <div class="panel-body">
						    <ul class="list-group">
							   <li class="list-group-item" th:each="item,iterInfo:${list}">
					                <span><a href="${item.url}" download="diwnload"   th:text="${item.name}"></a></span>
					                <span th:text="'大小:'+ ${item.size} + 'KB'" style="margin-left:10px;"></span>
					            </li>
							    
							</ul>
					    </div>
					</div> 
			
				</div>
			</div>
		</div>

</body>

</html>